import React,{useEffect} from 'react'
import * as echarts from "echarts"
import sichuan from "../../assetst/json/province/sichuan.json"
export default function SicuanMap() {
  useEffect(()=>{
    echartsInit()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  const myon=(val)=>{
       alert(val)
  }
  const echartsInit=()=>{
    const myChart = echarts.init(document.getElementById("main"))
    // myChart.on("mouseover", function (params) { // 取消鼠标移入高亮
    //   myChart.dispatchAction({
    //     type: "downplay",
    //   });
    // });
    // 注册地图
    echarts.registerMap("sicuan",sichuan);
    const option={
      backgroundColor:"rgba(128, 128, 128, 0.5)",
      tooltip:{// 提示框组件的通用介绍：
        show:true,
        triggerOn: 'click',//开启enterable才有效
        enterable: false,
        formatter:(params)=>{
          console.log(params)
          let name = params.name
          let value = (params.value&&params.data.value)||0
          return `<div onclick="${myon(name)}">名称:${name} 值:${value}</div>`
        }
       },
       emphasis:{
        // disabled: true,// 设置移入不显示true
        itemStyle:{
          
          color:"#eee",
           borderColor: '#5AB0FE',
            borderWidth: 2
        },
        label:{
          overflow:"none",
          align: "right",
          color:"#ffffeee",
          // fontSize:"13"
        }
      },
      series:[
        {  name:"四川",
        // aspectScale: 0.75, // 长宽缩放比
           select:{
          // disabled:true,// 是否可选中 在开启 selectedMode才有效,值为true不可选中
             position:"top",
                //  label:{ 
                //    show:true, // 是否显示标签，如成都市
                //    distance:41,
                //    rotation:45,
                //   //  offset:[30,50]// 标签偏移
                //   color:"#fff",
                //   fontStyle:'normal',
                //   fontWeight:'500'
                //   }
              itemStyle:{
                // areaColor: '#ffeeff' 选中区域
                color:"rgb(25,255,252)"
                }
        }, // 
         selectedMode:true,
          type:"map",
          map:"sicuan",
          zoom:1,
          roam:true,
          label:{
              show:true,
              fontSize:5
          },
          itemStyle:{ //地图区域的多边形 图形样式。
            // areaColor:"#fff",// 背景色
            areaColor:"#eee113",
            borderColor:"rgba(0,0,0,0.5)",
            emphasis:{// 鼠标覆盖的颜色
              areaColor:"rgba(3,0,1,0.5)"
            }
        },
          data:[
            { name:"眉山市",value:"10"},
            { name:"成都市",value:"100"}
          ],
          
      },
      ],
      // geo:{
      //   selectedMode:false
      // }
    }
    myChart.setOption({...option})
  }
  return (
    <div>
        
    </div>
  )
}
